<template>
  <div class="footer-wrapper">
    <div class="footer">
      <div class="footer-top">
        <div class="left">
          <div class="footer-logo"></div>
          <div class="footer-info">OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目</div>
        </div>
        <ul class="right">
          <a class="btn-email"
             target="blank"
             href="mailto:web@openharmony.io"></a>
          <li class="btn-erweima">
            <div class="erweima">
              <img :src="erweimaImg"
                   alt="">
              <span>获取最新资讯</span>
            </div>
          </li>
          <a class="btn-gitee"
             target="blank"
             href="https://gitee.com/openharmony"></a>
          <a class="btn-bilibili"
             target="blank"
             href="https://space.bilibili.com/1599887320"></a>
          <a class="btn-pic"
             target="blank"
             href="https://www.openharmony.cn/photos/"></a>
        </ul>
      </div>
      <!-- <dl class="footer-link">
        <dt>友情链接：</dt>
        <div v-if="!isPhone"
             class="link-wrapper">
          <dd v-for="(lItem,lIndex) in linkData"
              :key="lIndex">
            <a :href="lItem.href">{{lItem.name}}</a>
          </dd>
        </div>
        <div v-if="isPhone"
             class="link-wrapper">
          <dd v-for="(listOne,oneIndex) in linkListOne"
              :key="oneIndex">
            <a :href="listOne.href">{{listOne.name}}</a>
          </dd>
        </div>
        <div v-if="isPhone"
             class="link-wrapper">
          <dd v-for="(listTwo,twoIndex) in linkListTwo"
              :key="twoIndex">
            <a :href="listTwo.href">{{listTwo.name}}</a>
          </dd>
        </div>
      </dl> -->
      <div class="footer-copy-wrapper">
        <div class="footer-copy">Copyright © 2021 OPENATOM FOUNDATION. All rights reserved. 开放原子开源基金会版权所有 | 京ICP备2020036654号-3 </div>
        <ul class="footer-about">
          <li><a href="https://www.openharmony.cn/community/trademark/"
               target="_blank">品牌</a> </li>
          <li><a href="https://www.openharmony.cn/Policy/"
               target="_blank">隐私政策</a></li>
          <li><a href="https://www.openharmony.cn/Terms/"
               target="_blank">法律声明</a></li>
          <li><a href="https://www.openharmony.cn/projects_management/"
               target="_blank">管理制度</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isPhone: false,
      screenWidth: document.body.clientWidth,
      erweimaImg: require("../../assets/images/footer-erweima.jpg"),
      linkData: [
        {
          name: "华为云",
          href: "javascript:;"
        },
        {
          name: "深开鸿",
          href: "javascript:;"
        },
        {
          name: "中软国际",
          href: "javascript:;"
        },
        {
          name: "木兰开源社区",
          href: "javascript:;"
        },
        {
          name: "通信软件技术",
          href: "javascript:;"
        },
        {
          name: "九联科技",
          href: "javascript:;"
        },
        {
          name: "软通动力",
          href: "javascript:;"
        }
      ]
    };
  },
  computed: {
    linkListOne () {
      return this.linkData.slice(0, 4)
    },
    linkListTwo () {
      return this.linkData.slice(4, 7)
    }
  },
  watch: {
    screenWidth (newVal) {
      if (newVal < 768) this.isPhone = true
      else this.isPhone = false
    }
  },
  methods: {
    advertScreenWidth () {
      window.screenWidth = document.body.clientWidth
      this.screenWidth = window.screenWidth
    }
  },
  created () {
    let phonewid = document.documentElement.clientWidth < 768;
    this.isPhone = phonewid;
  },
  mounted () {
    window.addEventListener('resize', () => this.advertScreenWidth(), false)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.advertScreenWidth(), false)
  }
};
</script>

<style scoped lang="less">
@media screen and (min-width: 1032px) {
  .base {
    width: 1032px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .footer-wrapper {
    background: #242933;
    font-family: HarmonyOS_Sans_SC;
    color: rgba(255, 255, 255, 0.45);
    .footer {
      .base;
      flex-direction: column;
      padding-top: 32px;
      .footer-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        .left {
          .footer-logo {
            width: 188px;
            height: 40px;
            background: url("../../assets/images/footer-logo.png") no-repeat
              100%;
            margin-bottom: 16px;
          }
          .footer-info {
            height: 19px;
            line-height: 19px;
            padding-bottom: 26px;
          }
        }
        .right {
          display: flex;
          .btn-gitee {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-gitee.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-gitee-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-pic {
            width: 38px;
            height: 38px;
            background: url("../../assets/images/btn-pic.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-pic-hover.png") no-repeat
                100% 100%;
            }
          }
          .btn-bilibili {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-bilibili.png") no-repeat
              100% 100%;
            &:hover {
              background: url("../../assets/images/btn-bilibili-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-email {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-email.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-email-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-erweima {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-erweima.png") no-repeat
              100% 100%;
            position: relative;
            cursor: pointer;
            .erweima {
              width: 106px;
              height: 111px;
              background: url("../../assets/images/erweima-background.png");
              position: absolute;
              top: 110%;
              right: 0;
              display: none;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              img {
                margin-top: 8px;
                width: 74px;
                height: 74px;
              }
              span {
                color: #000;
                font-size: 12px;
                line-height: 17px;
              }
            }
            &:hover {
              background: url("../../assets/images/btn-erweima-hover.png")
                no-repeat 100% 100%;
              .erweima {
                display: flex;
              }
            }
          }
        }
      }
    }
    .footer-link {
      display: flex;
      height: 20px;
      line-height: 20px;
      margin-top: 24px;
      dt {
        margin-right: 24px;
      }
      .link-wrapper {
        display: flex;
        flex-wrap: wrap;
        dd {
          margin-left: 0;
          margin-right: 24px;
          a {
            text-decoration: none;
            color: rgba(255, 255, 255, 0.45);
            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
    .footer-copy-wrapper {
      display: flex;
      justify-content: space-between;
      height: 20px;
      font-size: 14px;
      line-height: 20px;
      margin-top: 24px;
      padding-bottom: 24px;
      margin-bottom: 24px;
      .footer-about {
        display: flex;
        li {
          padding: 0 16px;
          border-right: 1px solid rgba(255, 255, 255, 0.06);
          white-space: nowrap;
          &:last-child {
            padding-right: 0;
            border-right: 0;
          }
          a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1032px) {
  .base {
    width: 768px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .footer-wrapper {
    background: #242933;
    font-family: HarmonyOS_Sans_SC;
    color: rgba(255, 255, 255, 0.45);
    .footer {
      .base;
      flex-direction: column;
      padding-top: 32px;
      .footer-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        .left {
          .footer-logo {
            width: 188px;
            height: 40px;
            background: url("../../assets/images/footer-logo.png") no-repeat
              100%;
            margin-bottom: 16px;
          }
          .footer-info {
            height: 24px;
            line-height: 20px;
            padding-bottom: 24px;
          }
        }
        .right {
          display: flex;
          .btn-gitee {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-gitee.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-gitee-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-pic {
            width: 38px;
            height: 38px;
            background: url("../../assets/images/btn-pic.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-pic-hover.png") no-repeat
                100% 100%;
            }
          }
          .btn-bilibili {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-bilibili.png") no-repeat
              100% 100%;
            &:hover {
              background: url("../../assets/images/btn-bilibili-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-email {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-email.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-email-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-erweima {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-erweima.png") no-repeat
              100% 100%;
            position: relative;
            cursor: pointer;
            .erweima {
              width: 106px;
              height: 111px;
              background: url("../../assets/images/erweima-background.png");
              position: absolute;
              top: 110%;
              right: 0;
              display: none;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              img {
                margin-top: 8px;
                width: 74px;
                height: 74px;
              }
              span {
                color: #000;
                font-size: 12px;
                line-height: 17px;
              }
            }
            &:hover {
              background: url("../../assets/images/btn-erweima-hover.png")
                no-repeat 100% 100%;
              .erweima {
                display: flex;
              }
            }
          }
        }
      }
    }
    .footer-link {
      display: flex;
      height: 20px;
      line-height: 20px;
      margin-top: 24px;
      dt {
        width: 70px;
        margin-right: 24px;
      }
      .link-wrapper {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        dd {
          margin-left: 0;
          margin-right: 24px;
          a {
            text-decoration: none;
            color: rgba(255, 255, 255, 0.45);
            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
    .footer-copy-wrapper {
      display: flex;
      justify-content: space-between;
      height: 20px;
      line-height: 20px;
      margin-top: 24px;
      padding-bottom: 24px;
      margin-bottom: 24px;
      .footer-about {
        display: flex;
        li {
          padding: 0 16px;
          border-right: 1px solid rgba(255, 255, 255, 0.06);
          white-space: nowrap;
          &:last-child {
            padding-right: 0;
            border-right: 0;
          }
          a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .base {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .footer-wrapper {
    background: #242933;
    font-size: 14px;
    font-family: HarmonyOS_Sans_SC;
    color: rgba(255, 255, 255, 0.45);
    .footer {
      .base;
      flex-direction: column;
      padding-top: 32px;
      .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .footer-logo {
            width: 188px;
            height: 40px;
            background: url("../../assets/images/footer-logo.png") no-repeat
              100%;
            margin-bottom: 16px;
          }
          .footer-info {
            font-size: 14px;
            height: 40px;
            line-height: 20px;
            text-align: center;
            padding-bottom: 24px;
          }
        }
        .right {
          display: flex;
          .btn-gitee {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-gitee.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-gitee-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-pic {
            width: 38px;
            height: 38px;
            background: url("../../assets/images/btn-pic.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-pic-hover.png") no-repeat
                100% 100%;
            }
          }
          .btn-bilibili {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-bilibili.png") no-repeat
              100% 100%;
            &:hover {
              background: url("../../assets/images/btn-bilibili-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-email {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-email.png") no-repeat 100%
              100%;
            &:hover {
              background: url("../../assets/images/btn-email-hover.png")
                no-repeat 100% 100%;
            }
          }
          .btn-erweima {
            width: 38px;
            height: 38px;
            margin-right: 24px;
            background: url("../../assets/images/btn-erweima.png") no-repeat
              100% 100%;
            position: relative;
            .erweima {
              width: 106px;
              height: 111px;
              background: url("../../assets/images/erweima-phone-background.png");
              position: absolute;
              bottom: 110%;
              right: -34px;
              display: none;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              img {
                width: 74px;
                height: 74px;
              }
              span {
                color: #000;
                font-size: 12px;
                line-height: 17px;
              }
            }
            &:hover {
              background: url("../../assets/images/btn-erweima-hover.png")
                no-repeat 100% 100%;
              .erweima {
                display: flex;
              }
            }
          }
        }
      }
    }
    .footer-link {
      line-height: 20px;
      margin-top: 19px;
      padding: 0 12px;
      dt {
        margin-bottom: 8px;
      }
      .link-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        dd {
          margin-left: 0;
          a {
            text-decoration: none;
            color: rgba(255, 255, 255, 0.45);
            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
    .footer-copy-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 20px;
      margin-top: 24px;
      padding-bottom: 24px;
      .footer-copy {
        text-align: center;
      }
      .footer-about {
        margin-top: 16px;
        display: flex;
        li {
          padding: 0 16px;
          border-right: 1px solid rgba(255, 255, 255, 0.06);
          &:last-child {
            padding-right: 0;
            border-right: 0;
          }
          a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
  }
}
</style>
